<template>
  <div class="box">
    <div class="header">
      <van-nav-bar title="修改密码">
        <template #left>
          <van-icon
            name="arrow-left"
            size="25"
            color="black"
            @click="$router.push('/Login')"
          />
        </template>
      </van-nav-bar>
    </div>
    <div class="main">
      <!-- 输入旧密码 -->
      <van-field v-model="oldPass" type="password" label="旧密码" />
      <!-- 输入密码 -->
      <van-field v-model="newPass" type="password" label="新密码" />
      <div class="button">
        <!-- 提交按钮 -->
        <van-button round type="info" color="red" size="large" @click="submit"
          >提交按钮</van-button >
      </div>
    </div>
  </div>
</template>

<script>
import {getpasswrod} from '../api/ChangePassword'
import Vue from "vue";
import { Field, Button } from "vant";

Vue.use(Field);
Vue.use(Button);
export default {
  data() {
    return {
      oldPass: "",
      newPass: "",
    };
  },
  methods: {
   submit() {
      getpasswrod({userid:localStorage.getItem('userid'),oldpassword:this.oldPass,newpassword:this.newPass}).then((res)=>{
        console.log(res);
      });
   }
  },
};
</script>

<style scoped>
.main .button {
  width: 200px;
  height: 50px;
  margin: auto;
}
::v-deep .van-button van-button--info van-button--normal van-button--round {
  width: 100%;
}
</style>